<template>
  <div class="withdrawImg">
    <div class="clearfloat">
      <orderStatistics :myInfo ='myInfo'  @getData='getTableData'/>
      <!-- 列表查找 -->
      <div class="search-wrap fr">
        <table-search
          ref="table-search"
          :selectHead="selectHead"
          @searchMethods="searchMethods">
        </table-search>
      </div>
    </div>


    <el-table
      ref="tableRef"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change='tableSortChange'
      height="88%">
      <el-table-column show-overflow-tooltip label="ID" width="60" align="center">
        <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*pageSize }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="订单编号" align="left" prop='order_number' sortable='custom' min-width="200">
        <template slot-scope="scope">
          {{ scope.row.finals ? scope.row.finals.order_number : '' }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="姓名" align="center" prop='user_name' sortable='custom' min-width="150">
        <template slot-scope="scope">
          {{ scope.row.user.name }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="审核状态" align="center" prop='status' sortable='custom' min-width="150">
        <template slot-scope="scope">
          {{ scope.row.status | deductionsAppeal }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="申请原因" align="left" prop='reason' sortable='custom' min-width="150"> </el-table-column>
      <el-table-column show-overflow-tooltip class-name="pay-status" label="缴费截图" align="center" prop='imgs' min-width="150">
        <template slot-scope='scope'>
          <div style="height: 40px">
            <el-image
              v-if="scope.row.finals.consumer_pay_img != null"
              :src="scope.row.finals.consumer_pay_img_thumb"
              :preview-src-list="[scope.row.finals.consumer_pay_img]"
              ></el-image>
          </div>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip label="申请时间" align="center" prop='created_at' sortable='custom' min-width="180"> </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button @click="reviews(scope.row,'no')" type="danger" size="small">驳回</el-button>
          <el-button @click="reviews(scope.row,'yes')" type="success" size="small">通过</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination @paginationChange="paginateChange" :total="total"></pagination>

  </div>
</template>

<script>
import orderStatistics from "~/components/orderStatistics"
import { getMyInfo } from "~/api/user"
import Pagination from '~/components/pagination'
import tableSearch from '~/components/tableSearch'
export default {
  data () {
    return {
      baseUrl: global.baseurl,
      tableData: [],
      loading: false,
      pageSize: 25, //一页可以几条
      currentPage: 1, //目前在第几页
      total: 0,
      table_params: {
        status: [3],
      },
      myInfo: {
        revokePayImgCount : 0
      },
      selectHead: [
        {
          label: '姓名',
          props: 'user_name'
        },
        {
          label: '申诉审核状态',
          props: 'status'
        },
        {
          label: '申诉原因',
          props: 'reason'
        },

      ],
      search_params: {},

    }
  },
  components: {
    Pagination,
    tableSearch,
    orderStatistics,
  },
  created () {
    this.getTableData()
  },
  watch: {
    tableData: {
      handler: function(val) {
        val.forEach(v => {
          if (v.finals.consumer_pay_img) {
            v.finals.consumer_pay_img = this.baseUrl + '/storage/upload/' + v.finals.consumer_pay_img
          }
          if (v.finals.consumer_pay_img_thumb) {
            v.finals.consumer_pay_img_thumb = this.baseUrl + '/storage/upload/' + v.finals.consumer_pay_img_thumb
          }
        })
      },
      immediate: true
    },
  },
  methods: {
    async getMyinfo (params) {
      let myInfo = await getMyInfo(this.$axios, params);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data)
        this.myInfo = myInfo.data.data
        this.roleID = this.myInfo.role_id
      }
    },
    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
      }
      params = {...params, ...this.table_params, ...this.search_params}
      if (args) {
        params = {...params, ...args}
      }
      this.$axios.get('api/finals/revoke_pay_img_list', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.splitImg(res.data.data)
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
           // 重绘表格解决错位问题
          this.$nextTick(()=>{
            this.$refs.tableRef.doLayout()
          })
          this.getMyinfo()
        } else {
          this.$message.error('服务器繁忙')
          this.loading = false
        }
      })
    },
    splitImg (data) {
      for(let i = 0; i < data.length; i++) {
        if (
          data[i].img == null ||
          data[i].img == ""
        ) { } else {
          data[i].imgs = [];
          let imgItem = data[i].img.split("&");
          for (let j in imgItem) {
            imgItem[j] = this.baseUrl + '/storage/upload/' + imgItem[j]
            data[i].imgs.push(imgItem[j]);
          }
        }
        if (
          data[i].thumb_img == null ||
          data[i].thumb_img == ""
        ) { } else {
          data[i].thumb_imgs = [];
          let imgItem = data[i].thumb_img.split("&")
          for(let j = 0; j< imgItem.length; j++) {
            imgItem[j] = this.baseUrl + '/storage/upload/' + imgItem[j]
            data[i].thumb_imgs.push(imgItem[j])
          }
        }
      }
    },
    searchMethods(params, no_search) {
      // this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params
      if (!no_search) {
          this.getTableData()
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage
      this.currentPage = params.page
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.table_params.sort_str = column.prop
        this.table_params.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.table_params.sort_str = column.prop
        this.table_params.sort_order = 'asc'
      } else {
        delete this.table_params.sort_str
        delete this.table_params.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
    },
    reviews(data, type) {

      this.$confirm(`你确定<span class='font_warning'>${type == "yes" ? "通过" : '驳回'}
                    </span><span class='font_success'>${data.user.name}</span>的申诉吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        dangerouslyUseHTMLString: true,
      }).then(() => {
        this.reviewsRequest(data, type)
      }).catch(() => {

      })
    },
    reviewsRequest(data,type) {
      let params = {
        revoke_pay_img_record_id: data.id,
        pass: type
      }
      this.$axios.put(`api/finals/revoke_pay_img_audit`, params).then( res => {
        if (res.data.code == 200) {
          this.$message({
            type:'success',
            message: '审核成功！'
          })
          this.getTableData()
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang='less' type='text/css' scoped>
  .withdrawImg {
    height: 100%; //撑满表格
    .withdraw-header {
      margin-bottom: 20px;
    }
    .el-table {
      width: 99.9% !important;

      .el-table__body {
        .pay-status {
          padding: 0;
          .cell {
            display: flex;
            align-items: center;
            justify-content: center;
            .el-image {
              width: 40px;
              height: 40px;
              margin-left: 10px;
              &:nth-last-child(1) {
                margin-left: 0;
              }
              image {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
          }
        }
      }
    }

  }
</style>
